<!--  -->
<template>
  <div>
    <!-- 产品搜索 -->
    <div class="header">
      <div class="searching">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="来源">
            <el-input v-model="formInline.productName" placeholder="来源"></el-input>
          </el-form-item>

          <el-form-item label="流向">
            <el-input v-model="formInline.productName" placeholder="流向"></el-input>
          </el-form-item>

          <el-form-item label="收入时间">
            <el-date-picker
              v-model="formInline.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="test">{{ testd(test2) }}</div>

      <div class="test2">{{ fullName }}</div>

      <a :href="testUrl" @click.prevent="testxiushi">百度</a>

      <div style="border: 20px">
        <span v-big="str" :style="{ opacity }"></span>
      </div>

      <div class="demo01" @click="testxiushi">
        <button @click.stop="tabledataTest">点我</button>
      </div>
      <Test></Test>
      <!-- 键盘事件 -->
      <input type="text" placeholder="来来来" @keyup.enter="testxiushi" />
      <ul>
        <li v-for="(s, index) in tableData2" :key="index">
          {{ s }}
        </li>
      </ul>

      <div class="button">
        <el-button type="warning" size="small" icon="el-icon-plus" @click="skip"
          >添加收入</el-button
        >
        <el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button>
        <div class="amountStyle">
          <h2>总计：{{ amount }} 元</h2>
        </div>
      </div>
    </div>

    <!-- 产品列表 -->
    <div class="content">
      <el-table
        :data="tableData"
        style="width: 100%"
        border
        header-row-class-name="active-header"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="source" label="来源" width="180" align="center">
        </el-table-column>
        <el-table-column prop="incomeDate" label="收入日期" width="180" align="center">
        </el-table-column>
        <el-table-column prop="money" label="金额" align="center" show-overflow-tooltip>
        </el-table-column>

        <el-table-column
          prop="incomeType"
          label="流向"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="reserved1"
          label="备注"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              type="primary"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination"></div>
      <Paginations
        :total="total"
        :page-size="pageSize"
        @currentChange="currentChange"
      ></Paginations>
    </div>
  </div>
</template>

<script>
// @是用来引入项目根目录下的文件或文件夹
import Paginations from "@/components/pagnation/Pagnation.vue";
//表示引入相对路径下的文件或文件夹。相对路径是相对于当前文件所在的位置
import Test from "./Test.vue";
export default {
  name: "PorductList",

  components: {
    Paginations,
    Test,
  },
  created() {
    console.log(this);
  },
  // 自定义指令
  directives: {
    // bing函数何时会被调用
    // 1.指令与元素成功绑定时
    //2.指令所在的模板重新解析时
    big(element, binding) {
      //element是dom信息 binding指令信息
      console.log(element);
      console.log(binding.value);
      element.innerHTML = binding.value;

      console.log("biggggg调用了");
    },
  },
  data() {
    return {
      opacity: 1,
      str: "自定义指令",
      ishot: true,
      test: "确实挺不错的",
      test1: 55,
      test2: 66,
      testUrl: "https://www.baidu.com/",
      amount: 0.0,

      formInline: {
        productName: "",
        date: "",
      },

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address:
            "新疆维吾尔自治区昌吉回族自治州木垒哈萨克自治县大南沟乌孜别克族乡(32字)和新疆维吾尔自治区伊犁哈萨克自治州察布查尔锡伯自治县米粮泉回族乡",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],

      tableData2: ["抽烟", "喝酒", "烫头"],
      total: 20,
      pageSize: 10,
    };
  },

  methods: {
    tabledataTest() {
      console.log(this);
      // this.tableData[0].name = "王小绿"; 可以
      this.tableData2.splice(0, 1, "学习");
    },

    testxiushi() {
      alert("你好啊");
    },

    testd(s) {
      const y = s + 45;
      return y;
    },
    skip() {
      console.log("跳转方法");
      this.$router.push("/product/add");
    },

    //页码数目改动
    currentChange(val) {
      console.log("父方法的页面和事件" + val);
    },

    // 获取产品列表数据
    async projectList(page) {
      let res = await this.$api.projectList({ pageNum: page });
      console.log("产品列表数据", res);
    },

    onSubmit() {
      console.log("submit!");
    },
    //编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
  computed: {
    // 简写
    fuName2() {
      return "计算属性测试";
    },
    fullName: {
      //get 有什么作用？ 当有人读取fullName时，get 就会被调用，且返回值就作为fuName的值
      //get 什么时候调用  1.初次读取get 会调用  2.所依赖的数据发生变化时
      get() {
        console.log("get 被调用了");
        return "计算属性测试";
      },
      //set 什么时候调用，当fullName时被修改时
      set(value) {},
    },
  },
  watch: {
    // ishot: {
    //   //正常写
    //   //初始化直接调用handler
    //   // immediate: true,
    //   //handler什么时候调用？当ishot发生改变时
    //   //handler(newval, oldVal) {
    //     //console.log(newval, oldVal);
    //     //console.log("监视属性ishot被修改了");
    //  // },

    // },

    //简写
    ishot(newval, oldVal) {
      console.log("简写形式");
    },
  },
};
</script>
<style>
.amountStyle {
  margin-right: 150px;
  float: right;
}
.header {
  background-color: white;
  padding: 10px;
  margin-bottom: 20px;
  width: 100%;
}

.content {
  background-color: white;
}

.button {
  padding-top: 15px;
  width: 100%;
}

.el-form-item {
  margin-bottom: 12px;
}

/* 深层穿透 
当样式不起作用时，可以用深层穿透
 /deep/ 

*/
.active-header {
  color: #333;
}
.pagination {
  padding-top: 50px;
}
.demo01 {
  width: 500px;
  height: 100px;
  background-color: blue;
}
</style>
